<template>
  <div class="profile" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="我的资料" left-text="" left-arrow>
        <div slot="right" class="searcha">
        </div>
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div class="content">
      <div class="item">
        <span>头像</span>
        <van-uploader>
          <img class="img" :src="datalist.AvatarUrl" />
        </van-uploader>
      </div>
      <div class="item" @click="Jumpname('name')">
        <span>昵称</span>
        <div class="img-box">
          <span>{{datalist.Nickname}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="item" @click="Jumpname('email')">
        <span>邮箱</span>
        <div class="img-box">
          <span>{{datalist.Email}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="item" @click="Jumptel">
        <span>手机号</span>
        <div class="img-box">
          <span>{{datalist.Mobile}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="item" @click="showsex">
        <span>性别</span>
        <div class="img-box">
          <span v-model="sexnv">{{sexnv}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="item" @click="time">
        <span>生日</span>
        <div class="img-box">
          <span v-model="birthday">{{birthday}}</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="sex-box">
      <van-popup v-model="sex" position="bottom">
        <div class="select-box">
          <div class="select-box-item" @click="sexchange('男')">男</div>
          <div class="select-box-item" @click="sexchange('女')">女</div>
          <!-- <div class="select-box-item" @click="sexchange('保密')">保密</div> -->
        </div>
        <div class="reset" @click="hidesex">取消</div>
      </van-popup>
    </div>
    <van-popup position="bottom" v-model="timeshow">
      <van-datetime-picker v-model="currentDate" type="date" :min-date="new Date(1990)" @cancel="showend" @confirm="endTimePop" />
    </van-popup>

    <!-- <vue-date-select v-model="dateVal"></vue-date-select> -->
  </div>
</template>

<script>
  import {
    getUserInfoByToken,
    setUserInfo
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        sex: false,
        sexnv: '',
        // dateVal:'',
        currentDate: new Date(),
        end_time: '1996-09-19',
        birthday: '请选择', //生日
        timeshow: false,
        datalist: [],
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
      // console.log(getColumnValue())
      this.addDate();
      this.getUserInfoByToken()
    },
    methods: {
      addDate() { //获取今天的日期
        let nowDate = new Date();
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        }
        // console.log(date);
        this.end_time = date.year + '-' + date.month + '-' + date.date;

      },
      clickleft() {
        this.$router.go(-1);
        console.log(1)
      },
      showsex() {
        this.sex = true;
      },
      hidesex() {
        this.sex = false;
      },
      sexchange(sex) {
        console.log(sex)
        // this.sexnv = sex;

        let data = {
          DoType: "Sex",
          Value: sex,
        }
        setUserInfo(data).then(res => { //更改性别
          // console.log(res);
          this.$toast.success('更改成功');
          this.sex = false;
          this.getUserInfoByToken();
        })
      },
      // afterRead(file) { //头像暂时不支持修改
      //   // 此时可以自行将文件上传至服务器
      //   // console.log(file);
      //   let data = {
      //     DoType: "Sex",
      //     Value: file,
      //   }
      //   setUserInfo(data).then(res => { //更改头像
      //     // console.log(res);
      //     this.$toast.success('更改成功');
      //     this.getUserInfoByToken();
      //   })
      // },
      Jumpname(type) {
        this.$router.push({
          path: "/Me/editNickName",
          query: {
            type: type,
          }
        })
      },
      Jumptel() {//跳转绑定手机号码
        // this.$router.push({
        //   path: "/Me/bindtel",
        //   query: {
        //     // type: type,
        //   }
        // })
      },
      time() { //弹出选择时间
        // this.timeshow = true
        let birthday = this.birthday
        if (birthday == '请选择') {
          this.timeshow = true
        } else {
          console.log('不弹出')
        }

      },
      // endTimeChange(e) { //获取选中的当前时间
      //   let endTimeArr = e.getValues(); //["2019", "03", "22", "17", "28"]
      //   this.end_time = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`
      //   console.log( this.end_time)
      // },
      endTimePop(value) { //确定选择时间
        // console.log(value)
        let d = new Date(value);
        let datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        this.birthday = datetime
        let data = {
          DoType: "Birthday",
          Value: datetime,
        }
        setUserInfo(data).then(res => { //更改生日
          // console.log(res);
          this.$toast.success('更改成功');
          this.getUserInfoByToken();
        })
        // console.log(datetime)
        this.timeshow = false
      },
      showend() { //取消选择时间
        this.timeshow = false
      },
      getUserInfoByToken() {
        let data = {}
        getUserInfoByToken(data).then(res => {
          console.log(res)
          this.birthday = res.Item.Birthday
          this.sexnv = res.Item.Sex
          this.datalist = res.Item
          if (this.sexnv == '') {
            this.sexnv = '保密'
          }
          if (this.birthday == '') {
            this.birthday = '请选择'
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  .profile {
    .bj {
      .van-icon {
        color: white !important;

      }
    }

    .content {
      // padding-top: 2.6875rem;
      background: #FFFFFF;

      .item {
        margin: 10px;
        // padding: 10px 0;
        height: 40px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        font-size: 14px;
        justify-content: space-between;

        .img {
          width: 35px;
          height: 35px;
          margin-right: 20px;
          border-radius: 30px;
        }

        .img-box {
          display: flex;
          align-items: center;

          span {
            margin-right: 0.625rem;
          }
        }
      }
    }

    .sex-box {
      display: flex;
      justify-content: center;

      .van-popup {
        background: none !important;
        display: flex;
        // align-items: center;
        justify-content: center;
        flex-direction: column;
        align-items: center;

        .select-box {
          border-radius: 5px;
          width: 90%;
          overflow: hidden;
          font-size: 16px;

          .select-box-item {
            height: 40px;
            line-height: 40px;
            background: #f3f3f3;
            text-align: center;
            border-bottom: 1px solid #ddd;
          }
        }

        .reset {
          width: 90%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #FFFFFF;
          border-radius: 0.5rem;
          margin: 5px 0;
          font-size: 16px;
        }
      }
    }
  }
</style>
